<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    top="74px"
    width="70%"
  >
    <div class="flex">
      <div class="flex-1">
        <span class="text-16 text-bold">边缘端</span>
        <div class="border padding-lr-20 padding-top-20 margin-top-20" style="height: 500px; overflow-y: auto">
          <el-form>
            <el-form-item label="边缘端组名">
              {{ activeForm.groupName }}
            </el-form-item>
            <el-form-item label="组ID">
              {{ activeForm.id }}
            </el-form-item>
            <el-form-item label="网关数">
              {{ iotEdgeEndList.length || 0 }}
            </el-form-item>
          </el-form>
          <el-table :data="iotEdgeEndList">
            <el-table-column
              prop="gatewayName"
              label="网关名称"
              width="200"
            />
            <el-table-column
              prop="sn"
              label="SN"
            />
          </el-table>
        </div>
      </div>
      <div class="flex flex-column justify-center margin-lr-20 text-24 text-gary text-gary">
        <div>></div>
        <div><</div>
      </div>
      <div class="flex-1">
        <span class="text-16 text-bold">管理端</span>
        <div class="border padding-lr-20 padding-top-20 margin-top-20" style="height: 500px; overflow-y: auto;">
          <el-form>
            <el-form-item label="网关数">
              {{ iotManageEndList.length || 0 }}
            </el-form-item>
          </el-form>
          <el-table :data="iotManageEndList">
            <el-table-column
              prop="gatewayName"
              label="网关名称"
              width="200"
            />
            <el-table-column
              prop="sn"
              label="SN"
            />
          </el-table>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        activeForm: {
          groupName: null,
          deptId: null
        },
        iotEdgeEndList: [],
        iotManageEndList: []
      }
    },
    methods: {
      reset() {}
    },
  }
</script>

<style lang="scss" scoped>

</style>